<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">

<link rel="import" href="../forest_detail_panel/forest-detail-panel.html">
<link rel="import" href="../forest_map/forest-map.html">
<link rel="import" href="../forest_picker_panel/forest-picker-panel.html">


<dom-module id="forest-app">

  <template>
    <style id="linter-paper-button-style">
      /**
       * This style preserves the styling previous to
       * https://github.com/PolymerElements/paper-button/pull/115
       * This change can break the layout of paper-button content.
       * Remove this style to apply the change, more details at b/70528356.
       */
      paper-button {
        display: inline-block;
        text-align: center;
        font-family: inherit;
      }
    </style>
    <style is="custom-style">
      /* Global variables. */
      :root {
        /* App-wide colors. */
        --primary-color: white;
        --secondary-color: var(--paper-teal-100);
        --primary-background-color: var(--paper-grey-700);
        --primary-text-color: var(--primary-color);
        --secondary-text-color: var(--secondary-color);
        --error-color: var(--paper-red-200);

        /* Control-specific color overrides. */
        --paper-slider-active-color: var(--paper-teal-100);
        --paper-slider-knob-color: var(--paper-teal-100);
        --paper-input-container-focus-color: var(--paper-teal-100);
        --paper-input-container-color: var(--primary-color);

        /* Heights with multiple dependencies. */
        --picker-height: 200px;
        --picker-mobile-height: 172px;
        --paper-toolbar-height: 64px;
      }

      /* App-wide styles. */
      :host ::content * {
        color: var(--primary-text-color);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: 600;
      }

      :host ::content a {
        color: var(--secondary-color);
      }

      :host ::content p {
        margin: 0;
      }

      :host ::content paper-material {
        background-color: var(--primary-background-color);
        box-sizing: border-box;
        padding: 16px;
      }

      /* Rules for short displays. */
      .main[short-viewport] .top {
        height: 100%;
        width: 100%;
      }

      /* Rules for narrow displays. */
      .main[narrow-viewport] .top {
        position: fixed;
        height: calc(100% - var(--picker-mobile-height));
        width: 100%;
      }

      .main[narrow-viewport] .top forest-map {
        @apply --layout-fit;
      }

      .main[narrow-viewport] .bottom {
        position: fixed;
        height: calc(100% - var(--paper-toolbar-height));
        width: 100%;
        top: calc(100% - var(--picker-mobile-height));
        overflow: hidden;
      }

      .main[narrow-viewport] .bottom[expanded] {
        top: var(--paper-toolbar-height);
      }

      .main[narrow-viewport] .bottom forest-detail-panel {
        height: calc(100% - var(--picker-mobile-height));
      }

      /* Rules for larger screens. */
      .main:not([narrow-viewport]) {
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .main:not([narrow-viewport]) .top {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        align-items: stretch;
      }

      .main:not([narrow-viewport]) .top forest-map {
        flex-grow: 1;
        position: relative;
      }

      .main:not([narrow-viewport]) .top forest-detail-panel {
        flex-basis: 360px;
      }

      /* Base rules. */
      :host {
        overflow: hidden;
      }

      .bottom forest-picker-panel {
        width: 100%;
      }

      .title-toolbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: var(--toolbar-translucent-dark-color);
      }

      .title-toolbar .title {
        margin-left: 0;
        line-height: 24px;
        flex: auto;
      }

      .title-toolbar .about {
        margin-right: 10px;
      }

      /* Stacking order. */
      .title-toolbar {
        z-index: 1;
      }

      forest-map ::content forest-controls,
      forest-map ::content forest-layer-panel,
      forest-map ::content forest-search-panel {
        z-index: 2;
      }

      .bottom {
        z-index: 3;
      }

      a.about {
        color: var(--primary-text-color);
        text-decoration: none;
      }

      .action-button {
        font-size: 14px;
        line-height: 28px;
        font-weight: 500;
        padding: 0.2em 0.97em;
        color: white;
        background-color: var(--paper-teal-400);
      }
    </style>
    <iron-media-query query="(max-width: 720px)" query-matches="{{narrowViewport}}">
    </iron-media-query>
    <iron-media-query query="(max-height: 400px)" query-matches="{{shortViewport}}">
    </iron-media-query>

    <carbon-location route="{{route_}}" use-hash-as-path></carbon-location>

    <paper-toolbar class="title-toolbar">
      <div class="title" slot="top">Global Forest Change Explorer</div>
      <a class="about" href="http://globalforestchange.org" slot="top">
        <template is="dom-if" if="{{!narrowViewport}}">
          <paper-button class="about action-button">About</paper-button>
        </template>
        <template is="dom-if" if="{{narrowViewport}}">
          About
        </template>
      </a>
    </paper-toolbar>

    <div class="main" narrow-viewport$={{narrowViewport}} short-viewport$={{shortViewport}}>
      <div class="top">
        <forest-map
            id="map"
            narrow-viewport$={{narrowViewport}} short-viewport$={{shortViewport}}
            observe="curDestinationDetails.geoQuery, curDestinationDetails.boundingBox"
            geo-query="{{curDestinationDetails.geoQuery}}"
            bounding-box="{{curDestinationDetails.boundingBox}}">
        </forest-map>

        <template is="dom-if" if="{{!narrowViewport}}">
          <forest-detail-panel
              narrow-viewport$={{narrowViewport}}
              cur-destination-details="[[curDestinationDetails]]"
              on-left-tap="selectPreviousDestination_"
              on-right-tap="selectNextDestination_">
          </forest-detail-panel>
        </template>
      </div>

      <div class="bottom" hidden$="{{shortViewport}}" expanded$={{expanded_}}>
        <forest-picker-panel id="pickerPanel"
            narrow-viewport$={{narrowViewport}}
            expanded$={{expanded_}}
            cur-destination-details="{{curDestinationDetails}}"
            on-repeat-tap="toggleMobileDrawer_">
        </forest-picker-panel>

        <template is="dom-if" if="{{narrowViewport}}">
          <forest-detail-panel
              narrow-viewport$={{narrowViewport}}
              cur-destination-details="[[curDestinationDetails]]"
              on-left-tap="selectPreviousDestination_"
              on-right-tap="selectNextDestination_">
          </forest-detail-panel>
        </template>
      </div>
    </div>
  </template>
  <script src="forest-app.js"></script>
</dom-module>
